import React from 'react'
import {Link} from 'react-router-dom'

import './user_menu.css'

class UserMenu extends React.Component {

    state={
        menu:[{
            title:<Link to="/user_info"><i className="iconfont icon-wo"/>&nbsp;我的主页</Link>
        },{
            title:<a href="#"><i className="iconfont icon-shoucang"/>&nbsp;收藏的文章</a>
        },{
            title:<a href="#"><i className="iconfont icon-xihuan1"/>&nbsp;喜欢的文章</a>
        },{
            title:<a href="#"><i className="iconfont icon-qianbao"/>&nbsp;我的钱包</a>
        },{
            title:<a href="#"><i className="iconfont icon-shezhi"/>&nbsp;设置</a>
        },{
            title:<a href="#"><i className="iconfont icon-ai-i"/>&nbsp;帮助与反馈</a>
        },{
            title:<a href="#"><i className="iconfont icon-tuichu"/>&nbsp;退出</a>
        }],
        showMenu:false
    }

    render() {
        return <div id="user_menu" onMouseOver={()=>this.setState({showMenu:true})} onMouseLeave={()=>this.setState({showMenu:false})}>
            <div className="box">
                <div className="avatar">
                    <img src="https://upload.jianshu.io/users/upload_avatars/16534955/971d9fd8-fcd3-41a8-a220-6e6ad4b1f1e6.png?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120" />
                </div>
            </div>
            <div className="umenu" style={{display:this.state.showMenu?'block':'none'}}>
                {this.state.menu.map((val, key)=>(
                    <p key={key}>
                        {val.title}
                    </p>
                ))}
            </div>
        </div>
    }
}

export default UserMenu